<template>
  <div class="inventory-report-table">
    <div class="operation-bar">
      <router-link class="back-link" to="/main/xingzheng/gudingzichan">
        <el-button icon="el-icon-arrow-left">返回</el-button>
      </router-link>
      <el-button type="primary" icon="el-icon-check" @click="saveData">保存</el-button>
    </div>
    <!-- <h2>{{ year }}年{{ month }}月存货盘点报告表</h2> -->
    <div v-if="!isEditingYearMonth" @dblclick="startEditing">
      <h2 title="双击可修改">{{ year }}年{{ month }}月存货盘点报告表</h2>
    </div>
    <div v-else style="margin: 0px 0px 20px 0px;">
      <input style="width: 60px;" v-model="year" type="number" placeholder="年" />年
      <input style="width: 40px;" v-model="month" type="number" placeholder="月" />月存货盘点报告表
      <button @click="saveYearMonth">保存</button>
      <button @click="cancelEditing">取消</button>
    </div>

    <span>
      <button @click="addItem">新增</button>
      <button @click="deleteSelectedItems">删除</button>
    </span>
    <div class="header">
      <table border="1">
        <thead>
          <tr>
            <th rowspan="2"><input type="checkbox" v-model="selectAll" @change="toggleAllSelect"></th>
            <th rowspan="2">序号</th>
            <th rowspan="2">仓库</th>
            <th colspan="3">盘盈金额</th>
            <th colspan="3">盘亏金额</th>
            <th rowspan="2">备注</th>
          </tr>
          <tr>
            <th>帐存金额</th>
            <th>实存金额</th>
            <th>差异额</th>
            <th>帐存金额</th>
            <th>实存金额</th>
            <th>差异额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in inventoryReportList" :key="index">
            <td><input type="checkbox" v-model="item.checked" @change="updateSelectAll"></td>
            <td><input v-model="item.serialNumber" type="number"></td>
            <td><input v-model="item.warehouse" type="text"></td>
            <td><input v-model="item.inventoryProfitBookAmount" type="number"></td>
            <td><input v-model="item.inventoryProfitActualAmount" type="number"></td>
            <td><input v-model="item.inventoryProfitDifferenceAmount" type="number"></td>
            <td><input v-model="item.inventoryLossBookAmount" type="number"></td>
            <td><input v-model="item.inventoryLossActualAmount" type="number"></td>
            <td><input v-model="item.inventoryLossDifferenceAmount" type="number"></td>
            <td><input v-model="item.remark" type="text"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="notes">
      <p>说明：此表是做为呈报总经理、董事会审批，财务帐务处理的依据</p>
    </div>
    <div class="signatures">
      <div class="form-group">
        <label>批准：</label>
        <input v-model="formData.approvedBy" type="text">
      </div>
      <div class="form-group">
        <label>复核：</label>
        <input v-model="formData.reviewedBy" type="text">
      </div>
      <div class="form-group">
        <label>审核：</label>
        <input v-model="formData.auditedBy" type="text">
      </div>
      <div class="form-group">
        <label>制表：</label>
        <input v-model="formData.preparedBy" type="text">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: '',
      month: '',
      formData: {
        approvedBy: '',
        reviewedBy: '',
        auditedBy: '',
        preparedBy: ''
      },
      inventoryReportList: [
        {
          serialNumber: 1,
          warehouse: '',
          inventoryProfitBookAmount: 0,
          inventoryProfitActualAmount: 0,
          inventoryProfitDifferenceAmount: 0,
          inventoryLossBookAmount: 0,
          inventoryLossActualAmount: 0,
          inventoryLossDifferenceAmount: 0,
          remark: '',
          checked: false
        }
      ],
      selectAll: false,
      isEditingYearMonth: false // 新增属性
    };
  },
  methods: {
    addItem() {
      const newItem = {
        serialNumber: this.inventoryReportList.length + 1,
        warehouse: '',
        inventoryProfitBookAmount: 0,
        inventoryProfitActualAmount: 0,
        inventoryProfitDifferenceAmount: 0,
        inventoryLossBookAmount: 0,
        inventoryLossActualAmount: 0,
        inventoryLossDifferenceAmount: 0,
        remark: '',
        checked: false
      };
      this.inventoryReportList.push(newItem);
    },
    deleteSelectedItems() {
      this.inventoryReportList = this.inventoryReportList.filter(item => !item.checked);
      this.selectAll = false;
    },
    toggleAllSelect() {
      this.inventoryReportList.forEach(item => {
        item.checked = this.selectAll;
      });
    },
    updateSelectAll() {
      this.selectAll = this.inventoryReportList.every(item => item.checked);
    },
    saveData() {
      // 模拟向后端发送数据保存，实际需替换为真实接口
      const apiUrl = '';
      const dataToSend = {
        ...this.formData,
        inventoryReportList: this.inventoryReportList
      };
      this.$axios
        .post(apiUrl, dataToSend)
        .then(response => {
          console.log('保存成功', response.data);
          alert('数据保存成功');
        })
        .catch(error => {
          console.error('保存失败', error);
          alert('数据保存失败，请检查');
        });
    },
    startEditing() {
      this.isEditingYearMonth = true;
    },
    saveYearMonth() {
      // 这里可以添加验证逻辑
      this.isEditingYearMonth = false;
    },
    cancelEditing() {
      this.isEditingYearMonth = false;
      // 如果需要恢复原始值，可以在这里添加逻辑
    }
  },
  created() {
    const currentDate = new Date();
    this.year = currentDate.getFullYear();
    this.month = currentDate.getMonth() + 1;
  }
};
</script>

<style scoped>
.inventory-report-table {
  font-family: '宋体', sans-serif;
  height: 100vh;
}


.operation-bar {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
}

.header {
  /* margin-bottom: 10px; */
  max-width: 1200px;
  overflow: auto;
  margin: 0 auto;
  max-height: 300px;
}

.signatures {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  line-height: 30px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

button {
  margin-right: 10px;
  margin-top: 10px;
}

.notes {
  margin-top: 10px;
  width: 1200px;
  margin: 0 auto;
  text-align: left;
  line-height: 30px;
}
</style>